<template>
	<view>
		<view class="keyword-search bagW">
			<view v-if="needFilter" class="keyword-search-flex search-where">
				<slot name="needFilter"></slot>
			</view>
			<view class="keyword-search-flex  keyword-search-flex-input">
				<view class="keyword-search-order">
					<input type="text" confirm-type="搜索" class="search-keyword-input" @blur="onSearchBlur" v-model="keyword" @focus="onSearchFocus"
						   @confirm="keywordSearch" />
					<!-- #ifdef H5 -->
					<view class="search-icon fs14 " :class="searchFocus||keyword?'focus':''">
						<text v-if="!keyword" class="mgl5">{{placeholder}}</text>
					</view>
					<!-- #endif -->

					<!-- #ifdef APP-PLUS -->
					<view class="search-icon fs14 " :class="searchFocus||keyword?'focus':''">
						<icon type="search" size="14" />
						<text v-if="!keyword" class="mgl5">{{placeholder}}</text>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<view class="search-icon fs14 " :class="searchFocus||keyword?'focus':''">
						<icon type="search" size="14" />
						<text v-if="!keyword" class="mgl5">{{placeholder}}</text>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<slot name="action">
				<view v-if="action" @click="clickAction" class="fs16 d-flex align-center pdl10 defaultColor">
					搜索
				</view>
			</slot>

		</view>
	</view>
</template>

<script>
    export default {
    	props:{
			needFilter:{
				type:Boolean,
				default:false,
			},
			autoSearch:{
				type:Boolean,
				default:false,
			},
			placeholder:{
				type:String,
				default:'搜索',
			},
			action:{
				type:Boolean,
				default:true,
			},
			params:{
				default:null,
			}

		},
        data(){
        	return {
				keyword:'',
				searchFocus: false,
			}
		},
		watch:{
			keyword() {
				if (this.autoSearch) {
					this.changeFunc()
				}
			},
		},
		methods:{
			onSearchFocus() {
				this.searchFocus = true;
			},
			onSearchBlur() {
				this.searchFocus = false;
				// if(this.keyword){
				// 	this.changeFunc();
				// }
			},
			keywordSearch(e) {
				if (this.autoSearch) {
					this.changeFunc()
				}
			},
			clickAction(){
				this.changeFunc()
			},
			changeFunc(){
				this.$emit('onChange',{
					keyword:this.keyword,
					params:this.params
				})
			},
		}
    }
</script>

<style scoped lang="scss">
	@import "../common/common.scss";
	.keyword-search {
		display: flex;
		box-sizing: border-box;
		position: relative;
		border-bottom: 2upx solid #eee;
		border-top: 2upx solid #eee;
		padding: 20upx 30upx;
		/* z-index: 2; */
	}

	.keyword-search .keyword-search-flex {
		flex-direction: row;
	}

	.option-icon {
		font-size: 14upx;
		margin-top: 3upx;
		margin-left: 1upx;
	}

	.keyword-search-flex-input {
		flex: 1;
		box-sizing: border-box;
	}

	.keyword-search-order {
		width: 100%;
		background-color: #F8F8F8;
		box-sizing: border-box;
		border-radius: 40upx;
		/* text-align: center; */
		/* padding: 30upx 0; */
		position: relative;
	}

	.search-keyword-input {
		padding: 8upx 0 8upx 60upx;
		border: 0;
		margin: 0;
		/* #ifdef APP-PLUS */
		font-size: 36upx;
		/* #endif */
	}

	.search-icon {
		position: absolute;
		color: #999;
		height: 50upx;
		top: 12upx;
		left: 50%;
		margin-left: -47upx;
		transition: all 0.3s;
	}

	.search-icon.focus {
		left: 20upx;
		margin-left: 0;
	}
</style>
